/**
* Description: 胸牌管理
*
* Created by hrx on 2023/9/16
*/
<template>
  <div class="badge">
    <div class="content">
      <!-- 头部搜索栏 -->
      <div class="state" style="width: 100%">
        <div class="title">胸牌管理</div>
        <div class="left">
          <el-button :icon="Plus" type="primary" class="add-button" @click="addBadge"
          >
            创建胸牌
          </el-button>
          <el-button class="clear-button" @click="batchAdd">批量创建</el-button>
        </div>
        <el-form :model="form" ref="formRef" inline class="rightForm">
          <el-form-item>
            <el-select
              style="width: 160px; height: 36px"
              v-model="form.data.bindFlag"
              placeholder="请选择胸牌绑定状态"
              class="right20"
              clearable
            >
              <el-option
                v-for="item in bindFlagList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              style="width: 160px; height: 36px"
              v-model="form.data.electricQuantity"
              placeholder="请选择电量状态"
              class="right20"
              clearable
            >
              <el-option
                v-for="item in electricQuantityList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 160px; height: 36px"
              placeholder="请输入人员姓名"
              v-model="form.data.userName"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 160px; height: 36px"
              placeholder="请输入胸牌编号"
              v-model="form.data.breastpieceCode"
              prop="breastpieceCode"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="search-button" @click="getListData('search')">搜索</el-button>
            <el-button class="clear-button" @click="resetData">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 数据展示部分 -->
      <div class="tablePage">
        <Table
          ref="tableRef"
          :not-data-img="$CONSTANTS.NOT_DATA_IMG"
          :table-columns="tableTitle"
          :remote-api="getBadgeListApi"
          :autoLoad="false"
          :pageNumberList="[10, 20, 50, 100]"
          ppageFieldName="page"
          pnumberFieldName="limit"
        >
          <template #index="scope">
            {{ scope.index + 1 }}
          </template>
          <template #networkStatus="scope">
            <span :style="{color: $CONSTANTS.NETWORK_STATUS[scope.row.networkStatus].COLOR}">
              {{ $CONSTANTS.NETWORK_STATUS[scope.row.networkStatus].TITLE }}
            </span>
          </template>
          <template #operate="scope">
            <el-button v-if="scope.row.bindFlag == 0" type="primary" class="edit-button"
                       @click="bindingUser(scope.row)">
              绑定人员
            </el-button>
            <el-button v-if="scope.row.bindFlag == 1" type="primary" class="edit-button"
                       @click="unbindingUser(scope.row)">
              解绑人员
            </el-button>
            <el-button
              type="danger"
              :icon="Delete"
              class="delete-button"
              @click="delBadge(scope.row)"
            ></el-button>
          </template>
        </Table>
      </div>
    </div>
    <!--    创建胸牌-->
    <EditBadge ref="editBadgeRef" @afterSubmit="init"/>
    <!--        绑定人员-->
    <bindingUserDialog ref="bindingUserDialogRef" @afterSubmit="init"/>
    <!--    批量上传胸牌（批量上传文件）-->
    <upload-file-dialog
      ref="uploadFileDialogRef"
      :demoUrl="demoUrl"
      title="批量创建胸牌"
      @afterSubmit="init"
      :upload-api="uploadBadgeApi"
    >
      <template #default>
        <div class="contentItems">
          <h3>批量创建胸牌说明</h3>
          <p>1、上传前请先下载模板，按照模板要求内容录入到模板中。</p>
          <p>2、胸牌编号不可重复</p>
        </div>
      </template>
    </upload-file-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  type queryBadgeListParam,
  type badgeDetailDTO,
  getBadgeListApi,
  unbindUserApi,
  delBadgeApi,
  uploadBadgeApi
} from "@/api/badge"
import {onMounted, reactive, ref} from "vue";
import {IBaseQueryDataListParams} from "@/api";
import $CONSTANTS from "@/constants/globalConstants"
import {type ITableColumnItem} from "@/components/common/Table.vue"
import {Delete, Plus} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus";

interface selectListDTO {
  label: string;
  value: number;
}

const tableRef = ref()
const formRef = ref()
const editBadgeRef = ref()
const bindingUserDialogRef = ref()
const uploadFileDialogRef = ref()
const demoUrl = 'https://ambient-oss.oss-cn-hangzhou.aliyuncs.com/ambientMonitor/static/%E6%89%B9%E9%87%8F%E5%88%9B%E5%BB%BA%E8%83%B8%E7%89%8C%E6%A8%A1%E6%9D%BF.xlsx';


const form = reactive<IBaseQueryDataListParams<queryBadgeListParam>>({
  data: {
    bindFlag: undefined,
    electricQuantity: undefined,
    userName: undefined,
    breastpieceCode: undefined
  }
})
const tableTitle: Array<ITableColumnItem> = [
  {label: "序号", prop: "index", width: 80, template: true},
  {label: "胸牌编号", prop: "breastpieceCode"},
  {label: "电量", prop: "electricQuantity"},
  {label: "联网状态", prop: "networkStatus", template: true},
  {label: "人员姓名", prop: "userName"},
  {label: "组织架构", prop: "hospitalDeptName", width: 350},
  {label: "绑定时间", prop: "bindTime"},
  {label: "创建时间", prop: "createTime"},
  {label: "操作", prop: "operate", template: true, fixed: "right", width: 180},
]

const bindFlagList: Array<selectListDTO> = [
  {label: '未绑定', value: 0},
  {label: '已绑定', value: 1},
];
const electricQuantityList: Array<selectListDTO> = [
  {label: '正常', value: 0},
  {label: '低电量', value: 1},
];

const init = () => {
  getListData('getData')
}
const getListData = (type: string) => {
  if (type == 'search') {
    tableRef?.value?.refreshData(form);
  } else {
    tableRef?.value?.queryData(form);
  }
}

const addBadge = () => {
  editBadgeRef.value.dialogFormVisible = true;
}
const batchAdd = () => {
  uploadFileDialogRef.value.dialogFormVisible = true;
}
const resetData = () => {
  form.data = {
    bindFlag: undefined,
    electricQuantity: undefined,
    userName: undefined,
    breastpieceCode: undefined
  };
  tableRef.value.refreshData(form);
}
const bindingUser = (row: badgeDetailDTO) => {
  bindingUserDialogRef.value.dialogFormVisible = true;
  bindingUserDialogRef.value.init(row);
}
const unbindingUser = async (row: badgeDetailDTO) => {
  ElMessageBox.confirm('确认解除胸牌绑定的人员?', '提示', {type: 'warning',})
    .then(async () => {
      let res = await unbindUserApi(row.id);
      if (res.data.code == 0) {
        ElMessage.success('解绑成功');
        getListData("getData");
      }
    })
}
const delBadge = (row: badgeDetailDTO) => {
  ElMessageBox.confirm('确认要删除所选胸牌吗?', '提示', {type: 'warning',})
    .then(async () => {
      let res = await delBadgeApi(row.id);
      if (res.data.code == 0) {
        ElMessage.success('删除成功');
        getListData("getData");
      }
    })
}

onMounted(() => {
  getListData("getData")
})

</script>

<style lang="scss" scoped>
.badge {
  height: 100%;
  .contentItems {
    h3 {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    p {
      font-size: 14px;
    }
  }
}
</style>